// 1、找到图片
let image = $("#image");
// 2、剪裁配置项
let option = {
  // 宽高比
  aspectRatio: 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
}
// 3、调用copper方法
image.cropper(option);
// 点击上传，触发文件域单击事件
$('#image').cropper({
  aspectRatio: 1,
  preview: ".img-preview",
})

// 点击选择头像，能够实现选择图片
$('#chooseFile').on('click', function () {
  $('#file').trigger('click');
})


// 选择了图片，更换件采取的图片   文件域改变时预览
$("#file").on('change', function () {
  // 获取图片的url
  if (this.files.length > 0) {
    // 1、找到文件对象
    let fileObj = this.files[0];
    // 2、创建url
    let url = URL.createObjectURL(fileObj);

    // 更换建材取得图片
    // 法一：
    // image.cropper('destroy').attr("src",url).cropper('option')
    // 法二：
    image.cropper('replace', url)
  }
})


// 完成更换
//点击确定按钮 => 剪裁图片 => 转换为base64格式 => 提交给借口
$("button:contains('确定')").on('click', function () {
  // 剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  // canvas有一套内置的API方法，属于js原生语法(只有指定为JPEG格式只能指定图片质量这个参数，0位最模糊，1为原画)
  let base64 = canvas.toDataURL('image/jpeg', 0.3);
  axios.post('/my/user/avatar', `avatar=${encodeURIComponent(base64)}`).then(res => {
    let { status, message }  = res.data;
    if (status === 0) {
      layer.msg(message);
      // 更新index.html的头像
      window.parent.getUserInfo();
    }
  });
})